<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<style type="text/css">
			#mychart{width: 800px;height: 400px;}
		</style>
	</head>
	<body>
		<div id="mychart"></div>
		<script type="text/javascript">
			
			$(function(){
				let arr = [2131,2332,123,123,12,1332,123,1231]
				let arr2 = arr.map(v=>{return v*13})
				renderChart('#mychart',arr,arr2)
			})
			
			function renderChart(ele, barData=[], lineData=[], title='title', barName='bar', lineName='line', unit=''){
				let dom = $(ele)[0]

				if(!ele) return err.push({errmsg:'图表渲染找不到容器',ele:ele})
				let myChart = echarts.init(dom)
				let xData = Array(24).fill(0).map((v,i)=>{return i.toString().padStart(2,'0')+'时'})
				let blueDiv = `<span style="display:inline-block;margin-right:5px;margin-top:10px;border-radius:5%;width:10px;height:10px;left:5px;background-color:rgb(101,151,246);"></span>`
				let greenDiv = `<span style="display:inline-block;margin-right:5px;border-radius:5%;width:10px;height:2px;left:5px;background-color:rgb(118,218,176);vertical-align: middle;"></span>`
				let option = {
				title: {text: title,top: '-2%'},
				color: ['#6597f6','#76dab0'],
				tooltip: {trigger: 'axis',backgroundColor:'#fff',textStyle:{color:'#777',fontSize:'10',fontWeight:600},
					formatter:function(params){
						let line = params[0]
						let bar = params[1]
						return `
							${line.name}</br> ${blueDiv}${bar.seriesName}:&emsp;&emsp;${bar.data}${unit}  
							</br>${greenDiv}${line.seriesName}:&emsp;&emsp;${line.data}%
						`
					},
					// formatter:`{b}</br> ${blueDiv}{a0}:&emsp;&emsp;{c0}${unit}  </br>${greenDiv}{a1}:&emsp;{c1}%`,
					borderColor:'#ececec',borderWidth:1,padding:10},
				grid: {left: '5%',right: '8%',bottom: '8%'},
				legend: {data: [barName, lineName],right:'20%'},
				xAxis: {type: 'category',data: xData,axisLabel:{interval:0,fontSize:'10',color:'#888'},axisLine:{show:false},axisTick:{show:false}},
				yAxis: [
				  {type: 'value',boundaryGap:['0%','10%'],axisLabel:{interval:0,fontSize:'10',color:'#888',formatter: function(value) {return (Math.abs(value)>10000 ? value/1000 + 'k' + unit : value + unit)}},axisLine:{show:false},axisTick:{show:false},splitNumber:5},
				  {type: 'value',boundaryGap:['10%','10%'],axisLabel:{interval:0,fontSize:'10',color:'#888',formatter:'{value}%'},axisLine:{show:false,onZero:true},axisTick:{show:false},splitLine:{show:false},splitNumber:5}
				],
				series: [
				  {data: barData,type: 'bar',name: barName},
				  {data: lineData,type: 'line',name: lineName,yAxisIndex: 1}
				]
				}
				myChart.setOption(option)
			}
		</script>
	</body>
</html>
